import { Form, Input, Select, Checkbox, Button, Dialog } from 'tdesign-react';
import React, { useState } from 'react';
import FormItem from 'tdesign-react/es/form/FormItem';

interface EmployeeModalProps {
  visible: boolean;
  isEdit: boolean;
  initialData?: Record<string, any>;
  onSave: (data: Record<string, any>) => void;
  onCancel: () => void;
}
const EmployeeModal: React.FC<EmployeeModalProps> = ({ visible, isEdit, initialData, onSave, onCancel }) => {

  const [form] = Form.useForm();

  // 提交表单
  const handleSubmit = () => {
    form.validate().then(() => {
      onSave(form.getFieldsValue([]));
    });
  };

  return (
    <Dialog visible={visible} title={isEdit ? '修改权限' : '添加员工'} onCancel={onCancel} onConfirm={handleSubmit}>
      <Form form={form} initialData={initialData} labelAlign='top'>
        <FormItem name='name' label='姓名' rules={[{ required: true, message: '请输入姓名' }]}>
          <Input placeholder='请输入姓名'/>
        </FormItem>

        <FormItem name='workNo' label='工号' rules={[{ required: true, message: '请输入工号' }]}>
          <Input placeholder='请输入工号'  />
        </FormItem>

        <FormItem name='phone' label='手机号' rules={[{ required: true, message: '请输入手机号' }]}>
          <Input placeholder= '请输入手机号' />
        </FormItem>

        <FormItem name='position' label='岗位' rules={[{ required: true, message: '请选择岗位' }]}>
          <Select placeholder='请选择岗位' >
            <Select.Option value='物流专员'>物流专员</Select.Option>
            <Select.Option value='客服'>客服</Select.Option>
            <Select.Option value='财务'>财务</Select.Option>
          </Select>
        </FormItem>

        <FormItem label='权限设置'>
          <Checkbox.Group name='permissions'>
            <Checkbox value='在线下单'>在线下单</Checkbox>
            <Checkbox value='订单管理'>订单管理</Checkbox>
            <Checkbox value='员工管理'>员工管理</Checkbox>
            <Checkbox value='财务管理'>财务管理</Checkbox>
          </Checkbox.Group>
        </FormItem>
      </Form>
    </Dialog>
  );
};

export default EmployeeModal;